<template>
	<div class="app-container">
		<!--查询表单-->
		<el-form :inline="true" class="demo-form-inline">
			<!-- 标题 -->
			<el-form-item>
				<el-input v-model="query.title" placeholder="课程标题" />
			</el-form-item>
			<el-button type="primary" icon="el-icon-search" @click="list()">查询</el-button>
		</el-form>
		<!-- 表格 -->
		<el-table :data="result.list" border fit highlight-current-row row-class-name="myClassList">
			<el-table-column label="序号" width="70" align="center">
				<template slot-scope="scope">
					{{ scope.row.id }}
				</template>
			</el-table-column>
			<el-table-column label="课程信息" width="450" align="center">
				<template slot-scope="scope">
					<div class="info">
						<div class="pic">
							<img :src="scope.row.imgUrl" alt="scope.row.title" width="150px">
						</div>
						<div class="title">
							<a>{{ scope.row.title }}</a>
							<p>{{ scope.row.lessonNum }}课时</p>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="创建时间" align="center">
				<template slot-scope="scope">
					{{ scope.row.createtime.substr(0, 16) }}
				</template>
			</el-table-column>
			<el-table-column label="发布通知" width="120" align="center">
				<template slot-scope="scope">
					<el-link type="primary" @click="goNotice(scope.row.id)">课程通知</el-link>
				</template>
			</el-table-column>
			<el-table-column label="课程资料" width="120" align="center">
				<template slot-scope="scope">
					<el-link type="primary" @click="goDocument(scope.row.id)">课程资料</el-link>
				</template>
			</el-table-column>
			</el-table-column>
			<el-table-column label="操作" width="159" align="center">
				<template slot-scope="scope">
					<router-link :to="'/courseInfo?id='+scope.row.id">
						<el-button type="text" size="mini" icon="el-icon-edit">编辑课程信息</el-button>
					</router-link>
					<el-button type="text" size="mini" icon="el-icon-delete" @click="remove(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<el-pagination
		  style="margin-top:20px;"
		  background
		  layout="prev, pager, next"
		  :page-count="result.pages"
		  :current-page.sync="query.pageNo"
		  :page-size="query.pageSize"
		  @current-change="getData()">
		</el-pagination>
	</div>
</template>
<script>
	import axios from "@/utils/axiosutils.js"
	export default {
		data() {
			return { //定义数据变量和初始值
				query: {
					title: '',
					pageNo: 1,
					pageSize: 3
				},
				result:{
				  list: [],//查询成功返回数据
				  pages: 0
				},
			}
		},
		created() {
			// 初始化分类列表
			this.list();
		},
		methods: {
			list(){
				axios.post("course/courseList",resp=>{
					this.result.list = resp.obj.records
					this.result.pages = resp.obj.pages
				},this.query)
			},
			remove(id){
				axios.post("course/remove",resp=>{
					this.list();
				},{
					id:id
				})
			},
			goDocument(id){
				this.$router.push({path: '/course/documents', query: {courseId: id}});
			},
			goNotice(id){
				this.$router.push({path: '/course/notice', query: {courseId: id}});
			}
		}
	}
</script>
<style scoped>
	.myClassList .info {
		width: 450px;
		overflow: hidden;
	}

	.myClassList .info .pic {
		width: 150px;
		height: 90px;
		overflow: hidden;
		float: left;
	}

	.myClassList .info .pic a {
		display: block;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
	}

	.myClassList .info .pic img {
		display: block;
		width: 100%;
	}

	.myClassList td .info .title {
		width: 280px;
		float: right;
		height: 90px;
	}

	.myClassList td .info .title a {
		display: block;
		height: 48px;
		line-height: 24px;
		overflow: hidden;
		color: #00baf2;
		margin-bottom: 12px;
	}

	.myClassList td .info .title p {
		line-height: 20px;
		margin-top: 5px;
		color: #818181;
	}
</style>
